<ion-header>
  <ion-navbar>
    <ion-title>
      购物车
    </ion-title>

  <ion-buttons end>
    <button class="navTitle" ion-button (tap)="isEdit=!isEdit">
      <span *ngIf="!isEdit">编辑</span>
      <span *ngIf="isEdit">完成</span>
    </button>
  </ion-buttons>

  </ion-navbar>

</ion-header>

<ion-content>

  <!-- 
    <dl> 标签定义了定义列表（definition list）。
    <dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。
   -->

   <div class="cart_spinner" *ngIf="list.length==0 && hasData">
    <ion-spinner></ion-spinner>
  </div>  
  
  <p style="text-align:center; padding-top:80px;" *ngIf="!hasData">您购入车没有数据!</p>

  <dl class="cart_list" *ngFor = "let item of list">
    <dt>
        <!-- 复选框 -->
        <ion-checkbox color="danger" [(ngModel)]="item.checked" (ionChange)="changeCheckPrice()"></ion-checkbox>
        <!-- <img src="assets/imgs/03.jpg" /> -->
        <img [src] = 'config.apiUrl+item.product_pic' />
    </dt>

    <dd>
      <h2 class="cart_title">{{item.product_title}}</h2>
      <div class="cart_info">
        <div class="cart_price">{{item.product_price}}元</div>
        <div class="cart_num">
            <div class="input_left" (tap)="delSum(item)">-</div>
            <div class="input_center">
                <input type="text"  readonly="readonly" [(ngModel)]="item.product_count" name="num" id="num" />
            </div>
            <div class="input_right" (tap)="addSum(item)">+</div>
        </div>
      </div>
    </dd>

  </dl>

</ion-content>


    <!--底部的toolbar -->
    <ion-footer *ngIf="hasData">
        <ion-toolbar *ngIf="!isEdit">
            <div class="all_price" (tap)="allChecked()">
                <ion-checkbox color="danger" disabled="true" [(ngModel)]="isAllChecked"></ion-checkbox>
                全选  　<strong>合计:¥{{allPrice}}元</strong>
            </div>

              <ion-buttons end>
                <div color="danger" (tap)="doPay()" class="dopay">
                  去结算
                </div>
              </ion-buttons>
        </ion-toolbar>

        <ion-toolbar *ngIf="isEdit">
          <div class="all_price"  (tap)="allChecked()">
            
            <ion-checkbox disabled="true" color="danger" [(ngModel)]='isAllChecked'></ion-checkbox>
            全选  　
          </div>
          <ion-buttons end>
            <div color="danger" (tap)="doDelete()" class="dodelete">
              删除
            </div>
      
          </ion-buttons>
        </ion-toolbar>

      </ion-footer>
